<template>
    <el-container class="case-exam-container">
        <el-header class="case-exam-header">
            <i class="el-icon-question">利益冲突审查</i>
        </el-header>
        <el-row :gutter="20" class="row">
            <el-col :span="10">
                <font color="red">*</font>委托人证件号<br><br>
                <el-input v-model="params.cardNum"></el-input>
            </el-col>
            <el-col :span="10">
                <font color="red">*</font>对方当事人证件号<br><br>
                <el-input v-model="params.caseOppositeCardnum"></el-input>
            </el-col>
        </el-row>
        <el-row class="row" style="top: 10px;">
            <el-button type="primary" class="query-btn" @click="handleQueryClick">立即检测</el-button> &nbsp;
            <el-button type="primary" class="query-btn" v-show="isActive" @click="handleSetIdCard">增加客户</el-button>
        </el-row>

        <el-main class="case-exam-table">
            <el-table :data="filterLaws"
                      border
                      :highlight-current-row="true">
                <el-table-column label="案号" prop="id"></el-table-column>
                <el-table-column label="当事人/委托人" prop="client"></el-table-column>
                <el-table-column label="嫌疑人" prop="caseSuspect"></el-table-column>
                <el-table-column label="对方当事人" prop="caseOppositeParties"></el-table-column>
                <el-table-column label="承办律师" prop="caseAttorney"></el-table-column>
                <el-table-column label="案由" prop="caseCause"></el-table-column>
                <el-table-column label="收案日期" prop="collectionTime"></el-table-column>
                <el-table-column label="结案情况" prop="casePlan"></el-table-column>
            </el-table>
        </el-main>
        <el-footer class="case-exam-footer">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="pageResult.total"
                    :page-size="pageResult.size"
                    class="pagination"
                    @current-change="handleIndexChange"
            >
            </el-pagination>
        </el-footer>
    </el-container>
</template>

<script>
    //引入CaseLawService
    import CaseLawService from '../../../model/gs/CaseLawService.js'
    //拿到服务对象实例
    const caseService = CaseLawService.getInstance()

    export default {
        props:['law'],
        data() {
            return {
                pageResult:{},
                params:{},
                isActive:false,
                cardRules:/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
            }
        },
        methods:{
            //点击检查按钮的处理方法
            handleQueryClick(){
                //验证证件号是否为空
                if(this.params.cardNum === undefined || this.params.caseOppositeCardnum === undefined){
                    this.$message.warning({
                        message:'请输入证件号',
                        duration:1000
                    })
                    return
                }
                //验证证件号是否一样
                if(this.params.cardNum == this.params.caseOppositeCardnum
                    || !this.cardRules.test(this.params.cardNum)
                    || !this.cardRules.test(this.params.caseOppositeCardnum)){
                    this.$message.warning({
                        message:'输入的证件号有误',
                        duration:1000
                    })
                    return
                }
                caseService.getByIdCard(this.params).then(response => {
                    this.pageResult = response.data.data
                    //判断是否显示增加客户按钮
                    if(this.law!=undefined && this.law.caseCaseTypeId !== undefined){
                        this.isActive = true
                    }
                })
            },
            //分页索引改变事件
            handleIndexChange(index){
                this.params.page = index
                this.handleQueryClick()
            },
            //传递身份证号给父组件
            handleSetIdCard(){
                this.$emit('setCard',this.params)
            }
        },
        computed:{
            filterLaws(){
                if(this.pageResult.records != null){
                    return this.pageResult.records.map(item => {
                        if(item.casePlan !== 'C'){
                            item.casePlan = '未结案'
                        }else{
                            item.casePlan = '已结案'
                        }
                        return item
                    })
                }else{
                    return []
                }
            }
        }
    }
</script>

<style scoped>
    .row{
        position: relative;
        left: 100px;
    }
    .case-exam-container{
        width: 100%;
        height: 100%;
    }
    .case-exam-header{
        width: 100%;
        height: 10%;
        font-size: 30px;
        position: relative;
    }
    .case-exam-header i{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .case-exam-header .query{
        width: 400px;
        position: absolute;
        right: 90px;
        top: 50%;
        transform: translateY(-50%);
    }
    .case-exam-header .query-btn{
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .case-exam-table{
        width: 100%;
    }
    .case-exam-footer{
        width: 100%;
        height: 10%;
        position: relative;
    }
    .case-exam-footer .pagination{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
</style>
